<style scoped>
    .buttonMenu {
        position: relative;
        float: left;
    }
</style>

<template>
    <div>
        <Button style="float: left; margin-right: 8px" icon="ios-add" type="primary" shape="circle"
            @click="initmodal1(nationcourse)">添加全国课程</Button>
        <Modal v-model="modal1" title="添加全国课程" @on-ok="addNcCourse(nationcourse)" width=430 scrollable>
            国家专业代码：
            <Input v-model="nationcourse.ncId" placeholder="输入国家课程代码" style="width: 300px" clearable></Input>
            <br><br>
            <span style="margin-right: 25px">课程名称：</span>
            <Input v-model="nationcourse.ncName" placeholder="输入课程名称" style="width: 300px" clearable></Input>
            <br><br>
            <span style="margin-right: 48px">学分：</span>
            <Input v-model="nationcourse.ncCredit" placeholder="输入学分" style="width: 300px" clearable></Input>
        </Modal>
        <Button @click="deleteCourse(selected)" style="margin-right: 8px; float: left;" type="error" shape="circle">
            <Icon size="18" type="ios-close" />删除选中课程</Button>
        <br><br><br>
        <div>
            <Table border :columns="columnshead" :data="datat" @on-selection-change="Selected">
                <!-- 修改项 -->
                <!-- ncName -->
                <template slot-scope="{ row, index }" slot="ncName">
                    <Input type="text" v-model="editncName" v-if="editIndex === index" />
                    <span v-else>{{ row.ncName }}</span>
                </template>
                <!-- ncCredit -->
                <template slot-scope="{ row, index }" slot="ncCredit">
                    <Input type="text" v-model="editncCredit" v-if="editIndex === index" />
                    <span v-else>{{ row.ncCredit }}</span>
                </template>
                <!-- 修改按钮 -->
                <template slot-scope="{ row, index }" slot="action">
                    <div v-if="editIndex === index">
                        <Button @click="handleSave(row,index)" size="small"
                            style="background-color:#2b85e4;color:white; border-color: #2b85e4">保存</Button>
                        <Button @click="editIndex = -1" size="small"
                            style="background-color:#2b85e4;color:white; border-color: #2b85e4">取消</Button>
                    </div>
                    <div v-else>
                        <Button @click="modify(row, index)" size="small"
                            style="background-color:#2b85e4;color:white; border-color: #2b85e4">修改课程信息</Button>
                    </div>
                </template>
            </Table>
        </div>
        <br>
        <div class="buttonMenu">
            <Upload ref="upload" :action="$host + '/course/management/importNationalCourseExcel'">
                <Button style="margin-right: 8px;" type="success">
                    <Icon size="18" type="ios-cloud-upload-outline" />导入</Button>
            </Upload>
        </div>
        <div class="buttonMenu">
            <Button style="margin-right: 8px">
                <Icon size="18" type="ios-download-outline" />
                <a :href="$host + '/course/management/exportNationalCourseExcel'" style="color: #515A6E">导出</a></Button>
        </div>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="total" :current="1" show-elevator show-total @on-change="changePage"></Page>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                columnshead: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                    },
                    {
                        title: '国家课程代码',
                        key: 'ncId',
                    },
                    {
                        title: '课程名称',
                        slot: 'ncName',
                    },
                    {
                        title: '学分',
                        slot: 'ncCredit',
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        align: 'center',
                        width: 130
                    }
                ],
                nationcourse: {},
                datat: [],
                total: 1,
                current: 1,
                selected: [],
                editIndex: -1,
                editncName: '',
                editncCredit: '',
                modal1: false
            }
        },
        created() {
            this.$axios.get(this.$host + '/course/management/allNationalCourses?pageNum=1&pageSize=10').then(res => {
                this.total = res.data.data.total
                this.datat = res.data.data.list
            })
        },
        methods: {
            changePage(currentPage) {
                this.$axios.get(this.$host + '/course/management/allNationalCourses?pageNum=' + currentPage + '&&pageSize=10').then(res => {
                    this.datat = res.data.data.list
                    this.current = currentPage
                })
            },
            Selected(selection) {
                this.selected = selection
            },
            addNcCourse(nationcourse) {
                this.$axios.post(this.$host + '/course/management/newNationalCourse', nationcourse).then(res => {
                    if (res.data.message = '新增全国课程成功') {
                        this.$Message.success('添加全国课程成功')
                        if (this.datat.length == 10) {
                            this.datat.pop()
                        }
                        var obj = JSON.parse(JSON.stringify(nationcourse))  //解决相同对象覆盖问题，深度拷贝解决初始化清空
                        this.datat.unshift(obj)
                        this.total++
                    }
                    else
                        this.$Message.error('添加全国课程失败')
                })
            },
            deleteCourse(selected) {
                var delectncId = []
                var record = 0
                for (var i in selected) {
                    delectncId.push({ nationalCourseId: selected[i].ncId })
                    record++
                }
                this.$axios.delete(this.$host + '/course/management/nationalCourse', { data: { jsonArray: delectncId } }).then(res => {
                    if (res.data.message == '删除全国课程成功') {
                        this.$Message.success('成功删除' + record + '记录')
                        this.record = 0
                        this.$axios.get(this.$host + '/course/management/allNationalCourses?pageNum=' + this.current + '&&pageSize=10').then(res => {
                            this.total = res.data.data.total
                            this.datat = res.data.data.list
                        })
                    }
                    else
                        this.$Message.error('删除失败')
                })
            },
            modify(row, index) {
                this.editncName = row.ncName
                this.editncCredit = row.ncCredit
                this.editIndex = index
            },
            handleSave(row, index) {
                var putNc = {}
                putNc.ncId = row.ncId
                putNc.ncName = this.editncName
                putNc.ncCredit = this.editncCredit
                this.editIndex = -1;
                this.$axios.put(this.$host + '/course/management/newNationalCourse', putNc).then(res => {
                    if (res.data.message == '修改全国课程成功') {
                        this.$Message.success('修改成功')
                        row.ncName = this.editncName
                        row.ncCredit = this.editncCredit
                    }

                    else
                        this.$Message.error('修改失败')
                })
            },
            initmodal1(nationcourse) {
                this.modal1 = true
                for (var key in nationcourse) {
                    this.$delete(nationcourse, key)
                }
            }
        }

    }
</script>